<template>
	<thead>
		<tr v-for="(tr,index) in tableRow" :key="index">
			<th v-for="(d,i) in _getThead(index)" 
			:key="i"
	        :rowspan="d.rowspan"
	        :colspan="d.colspan"
			:class="[d.align,d.fixed&&!fixed?'hidden':'']">
				<div class="cell" v-if="d.type=='selection'">
					<mj-checkbox v-model="selected.all" @change="$parent.selectCheckedAll"></mj-checkbox>
				</div>
				<div v-else :class="['cell',d.sortable?'is-sortable':'',sortCurrent === i?sortCls:'']" @click.stop="$parent._orderBy(d,$event,i)">
					<span v-html="d.label" style="pointer-events: none;"></span>
					<span v-if="d.sortable" :class="[prefixCls+'-table-sort']">
						<i class="sort asc" @click.stop="$parent._orderBy(d,$event,i,'asc')"></i>
						<i class="sort desc" @click.stop="$parent._orderBy(d,$event,i,'desc')"></i>
					</span>
				</div>
			</th>
			<th v-if="height"></th>
		</tr>
	</thead>
</template>

<script>
import {prefixCls} from '../prefix'

export default {
	name:'tableHead',
	data() {
		return {
			prefixCls: prefixCls,
		}
	},
	props:['columns','sortCurrent','sortCls','selected','height','fixed'],
	mounted() {
		// console.log(this.columns)
	},
	methods: {
		_getThead (index) {
			return this.addSpanData.filter(item => {
				return item._layer === index
			})
		},
	    // 取子级所有列
	    _getAllCol (id, len) {
	    	if (!len) {
	    		len = 0
	    	}
	    	// this.columns.forEach(item => {
	    	// 	console.log('1122',item)
	    	// 	if (item.label === id) {
	    	// 		if (item._child) {
	    	// 			len = this._getAllCol(item.label, len)
	    	// 		} else {
	    	// 			len++
	    	// 		}
	    	// 	}
	    	// })
	    	return len
	    },
	},
	computed: {
	    // 对数据进行改造，添加rowspan和colspan两个属性
	    addSpanData () {
	    	let newData = []
	    	let newDataLeft = []
	    	let newDataRight = []
	    	this.columns.forEach(item => {
	    		// console.log(item)
	    		if (!item._child) {
	    			if(item.$children.length > 0) {
	    				item.colspan = item.$children.length
	    			}else{
		    			let row = this.tableRow - item._layer
		    			item.rowspan = row <= 1 ? null : row
	    			}
	    		} else {
	    			let col = this._getAllCol(item.label)
	    			item.colspan = col <= 1 ? null : col
	    		}
	    		newData.push(item)

	    		if(item.fixed == 'left'){
	    			newDataLeft.push(item)
	    		}
	    		if(item.fixed == 'right'){
	    			newDataRight.push(item)
	    		}
	    	})

    		/**
    		 * 有浮动列时候，重新排列，left的排到左侧，right的排到右侧。
    		 */
        	if(this.fixed == 'left') {
        		newDataLeft.map((item,index)=>{
        			newData.map((c,i)=>{
        				if(item.label == c.label) {
        					newData.splice(i,1)
        				}
        			})
	    			newData.unshift(item)
        		})
        	}
        	if(this.fixed == 'right') {
        		newDataRight.map((item,index)=>{
        			newData.map((c,i)=>{
        				if(item.label == c.label) {
        					newData.splice(i,1)
        				}
        			})
	    			newData.unshift(item)
        		})
        	}
	    	return newData
	    },
	    // 返回表头行数，
	    tableRow () {
	    	let maxLayer = 0
	    	this.columns.forEach(item => {
	    		if (item._layer > maxLayer) {
	    			maxLayer = item._layer
	    		}
	    	})
	    	return maxLayer + 1
	    }
	},
}
</script>